<template>
  <div>
    <div class="header">
      <el-button icon="el-icon-plus" @click="openSearchWord"
        >{{$t('analyzeData.searchKeycitiao')}}</el-button
      >
      <div style="padding: 0 20px">
        {{$t('analyzeData.searchcitiao')}}：<el-tag
          style="margin-top: 5px; margin-right: 5px;"
          v-for="(i, index) in searchtitle"
          :key="index"
          >{{ i }}</el-tag
        >
      </div>
    </div>
    <div class="tableBoxFather">
      <el-table :data="tableData" height="84vh" border style="width: 100%">
        <template slot="empty">
        <span style="color: #969799;">暂无数据，请选择词条后进行搜索</span>
        </template>
        <el-table-column prop="proof_name" :label="$t('analyzeData.proofName')" width="180">
        </el-table-column>
        <el-table-column prop="proof_num" :label="$t('analyzeData.proofNum')" width="180">
        </el-table-column>
        <el-table-column prop="suspect_name" :label="$t('analyzeData.xianyiren')"  width="180"> </el-table-column>
        <el-table-column prop="suspect_name" :label="$t('analyzeData.citiao')">
          <template slot-scope="scope">
            <div class="tagItem" v-for="(item,index) in scope.row.search_result" :key="index">
              <span v-if="item.result==1"><el-tag type="danger">[{{item.key}}] 已出现</el-tag></span>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <a-modal
      v-model="modal2Visible"
      :destroyOnClose="true"
      title="搜索标签"
      centered
      :maskClosable="false"
      @ok="submitSearchWord"
    >
      <div class="areaWord">
        <el-tag
          style="margin-top: 5px; margin-right: 5px;"
          size="smal"
          v-for="(item, index) in wordList"
          :key="index"
          closable
          @close="log(item)"
        >
          {{ item }}
        </el-tag>
     <el-button size="mini" class="clearBtn" @click="clearWord">清除</el-button>
      </div>
      <div class="inputBox">
        <a-input
          v-model="value"
          placeholder="输入词条"
          @keyup.enter.native="addSearchWord"
          style="width: 380px; margin-right: 20px;"
        />
        <el-button icon="el-icon-plus" size="small" @click="addSearchWord"
          >{{$t('analyzeData.add')}}</el-button
        >
      </div>
      <a-tabs
        style="margin-top: 20px"
        v-model="activeKey"
        tab-position="left"
        animated
      >
        <a-tab-pane key="1" tab="刑事犯罪">
          <el-tag
            style="margin-top: 5px; margin-right: 5px;cursor: pointer;"
            @click="addWordDefit(item)"
            v-for="item in criminalOffense"
            :key="item"
            effect="plain"
          >
            {{ item }}
          </el-tag>
        </a-tab-pane>
        <a-tab-pane key="2" tab="经济犯罪"> 
          <el-tag
            style="margin-top: 5px; margin-right: 5px;cursor: pointer;"
            @click="addWordDefit(item)"
            v-for="item in economicCrime"
            :key="item"
            effect="plain"
          >
            {{ item }}
          </el-tag>
        </a-tab-pane>
      </a-tabs>
    </a-modal>
  </div>
</template>

<script>
import { allSearchApi } from "@/api/analyze/allSearch";
export default {
  name: "serverSearch",
  data() {
    return {
      modal2Visible: false,
      selectboxIsshow: true,
      tableData:[],
      searchtitle: [],
      wordList: [],
      value: "",
      activeKey: "1",
      form: {},
      criminalOffense: ["杀人", "伤害", "抢劫", "投毒", "放火", "强奸", "白粉"],
      economicCrime: ["假冒伪劣", "走私", "虚假", "诈骗", "逃税", "知识产权", "财产"],
      options: [
        {
          value: 1,
          label: "第一名",
        },
        {
          value: 2,
          label: "第二名",
        },
        {
          value: 3,
          label: "第三名",
        },
        {
          value: 4,
          label: "第四名",
        },
      ],
    };
  },
  methods: {
    clearWord(){
      this.wordList=[]
    },
    addWordDefit(item) {
      if (this.wordList.indexOf(item) !== -1) {
        this.$message({
          message: "该词条已存在！",
          type: "warning",
        });
        return;
      }
        this.wordList.push(item);
    },
    submitSearchWord() {
      this.modal2Visible = false;
      let tableLoading = this.$loading({
        lock: true,
        text: "拼命搜索词条中，请耐心等待...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      this.searchtitle = this.wordList;
      let data = {
        keys:this.wordList
      };
      allSearchApi(data).then((res) => {
        if(this.wordList.length==0){
          tableLoading.close();
          this.tableData=[]
        }else{
          tableLoading.close();
          this.tableData=res.data
          this.$message({
            message: "已完成词条搜索！",
            type: "success",
          });
        }
      }).catch(err=>{
        tableLoading.close();
        this.tableData=[]
      })
    },
    // 随机轨迹路径颜色
    randomRgb(item) {
      var str = "#";
      function getRandom() {
        return Math.floor(Math.random() * 16).toString(16);
      }
      for (let i = 0; i < 6; i++) {
        let n = getRandom();
        str += n;
      }
      return str;
    },
    openSearchWord() {
      this.modal2Visible = true;
    },
    log(e, index) {
      Array.prototype.indexOf = function (val) {
        for (var i = 0; i < this.length; i++) {
          if (this[i] == val) return i;
        }
        return -1;
      };
      Array.prototype.remove = function (val) {
        var index = this.indexOf(val);
        if (index > -1) {
          this.splice(index, 1);
        }
      };
      this.wordList.remove(e);
    },
    addSearchWord() {
      if (this.wordList.indexOf(this.value) !== -1) {
        this.$message({
          message: "该词条已存在！",
          type: "warning",
        });
        return;
      }
      if (this.value !== "") {
        // if (this.wordList.length < 9) {
          this.wordList.push(this.value);
          this.value = "";
      } else {
        this.$message({
          message: "请输入词条！",
          type: "warning",
        });
      } 
    },
  },
};
</script>

<style scoped>
.clearBtn{
  position: absolute;
  bottom: 2px;
  right: 5px;
}
.tableBoxFather{
  padding: 20px;
}
.tagItem{
  display: inline-block;
  margin-left: 5px;
  
}
.header {
  width: 99%;
  margin: 10px auto;
  height: 70px;
  display: flex;
  align-items: center;
  background: rgb(243, 243, 243);
  padding: 10px 20px;
}
.inputBox {
  display: flex;
  align-items: center;
}
.areaWord {
  position: relative;
  min-height: 90px;
  border: 1px dashed #ccc;
  margin-bottom: 20px;
  padding: 10px 20px;
}
</style>